<template>
  <!-- 弹幕 -->
  <div class="barrages-drop">
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxHeight="boxHeight"
      :messageHeight="messageHeight"
    >
    </vue-baberrage>
  </div>
</template>

<script>
import { MESSAGE_TYPE } from "vue-baberrage";
import { mapState } from "vuex";

export default {
  name: "barrages",
  props:{
        chatMessageList:{
          type:Array,
          default(){
            return []  
        }
      }
  },
  data() {
    return {
      currentId: 0,
      barrageIsShow: true,
      messageHeight: 3,
      boxHeight: 150,
      barrageLoop: false,
      maxWordCount: 3,
      throttleGap: 5000,
      barrageList: [],
    };
  },

  watch: {
    chatMessageList() {
      this.addToList();
    },
  },

  methods: {
    getRandom(start, end, fixed) {
      fixed = 0;
      let differ = end - start;
      let random = Math.random();
      return (start + differ * random).toFixed(fixed);
    },

    addToList() {
      console.log(
        "🚀 ~ file: bulletScreen.vue ~ line 121 ~ addToList ~ list",
        this.chatMessageList
      );
      // list.forEach((v) => {
      //   this.barrageList.push({
      //     id: v.id,
      //     avatar: v.avatar
      //     msg: v.msg,
      //     time: v.time,
      //     type: MESSAGE_TYPE.NORMAL,
      //     barrageStyle: v.barrageStyle,
      //   });
      // });
      this.barrageList = [
        {
          id: ++this.currentId,
          avatar:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-7bc02fb18b93f68f91ead28164eaa3cc_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624524512&t=eabce9b42498068dcf37a968c2d27301",
          msg:
            this.chatMessageList[this.chatMessageList.length - 1].userName +
            ": " +
            this.chatMessageList[this.chatMessageList.length - 1].chatMessage,
          time: this.getRandom(5, 7),
          type: MESSAGE_TYPE.NORMAL,
          barrageStyle: "normal",
        },
      ];
      console.log(
        "🚀 ~ file: bulletScreen.vue ~ line 113 ~ list.forEach ~ this.barrageList",
        this.barrageList
      );
    },
  },
};
</script>

<style>
</style>